<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="../../框架/vue.js"></script>
    <style>
        .color{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-text="html"></p><!--这个标签可以将代码渲染成普通文本-->
    <p v-html="html"></p><!--这个标签可以将HTML渲染成应有的效果-->
    <p v-once>原始的值：{{mag}}</p><!--这个属性表示可以只渲染一次，之后被当作静态元素不再进行渲染，优化更新性能-->
    <p>后来更改的值：{{mag}}</p>
    <input type="text" v-model="mag">
<br>
    <p v-if="condition">yes</p><!--如果condition的值为true则显示yes，否则不显示-->
    <input type="text" v-model="condition">
<br>
    <p v-if="num===1">1</p>
    <p v-else-if="num===2">2</p>
    <p v-else>final</p>
    <input type="text" v-model="num">
    <br>
    <p v-show="false">你好世界</p><!--这个标签表示可以将任何的内容进行渲染，但是当display的值为none的时候是不会被显示出来的-->
    <br>
    <p>{{mag}}</p>
    <button type="button" v-on:click="mag='今天天气晴'">单击改变内容</button>
    <p>{{num}}</p>
    <button type="button" v-on:click="num++">点击加一</button>
    <button type="button" v-on:click="changeContent()">点击改变内容</button>
    <button type="button" @click="changeContent()">点击改变内容</button><!--v-on可以简写为@-->
<br>
    <button type="button" @click="onclick">鼠标点击</button>
    <button type="button" v-on:mouseover="onMouseover">鼠标经过</button><!--鼠标经过时候的事件-->
    <button type="button" v-on:mouseenter="onEnter">鼠标进入</button><!--鼠标进入时候的事件-->
    <button type="button" v-on:mouseleave="onOut">鼠标进入</button><!--鼠标进入时候的事件--><br>
    <button type="button" @click="printEvent($event)">打印点击事件发生的状态</button><br>
    <a href="https://www.baidu.com/" @click="handleClick('禁止弹出',$event)">点击跳转网页</a><br><!--表示当鼠标点击a标签时，本应该跳转网页的功能被关闭了，并将参数中的字符串弹窗显示-->
    <ul>
        <li v-for="cloth in array"><!--循环渲染数组中的内容，变量 in 数组的方式，可以用变量名调用数组中的值-->
            {{cloth.name}}${{cloth.price}}
        </li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}}-{{key}}:{{value}}
        </li>
        <li v-for="count in 5">这是第{{count+1}}次循环</li>
    </ul>

    <!--v-for遍历复杂的嵌套数组，核心思想就是将数组一层一层的分开后获取每一层自己想要的数据-->
    <div v-for="pl in pcList"><!--第一层循环，获取title数据作为标题头-->
        {{pl.title}}
        <ul>
            <li v-for="pll in pl.list"><!--第二层循环，获取每一个属性-->
                <a :href="pll.url">{{pll.className}}</a><!--绑定样式，将url属性作为参数传递给a标签的href属性-->
            </li>
        </ul>
        <div v-if="!pl.last" class="hr"></div>
    </div>
    <!--v-bind绑定数据指令-->
    <img :src="url" alt="图片"><!--将固定的属性值变成可以被修改的变量-->
    <button type="button" @click="changeUrl">改变图片</button><!--通过方法修改变量的值达到改变视图的效果-->

    <p :style="{color:co}">今天的天气真不错</p>
    <button type="button" @click="changeColor">改变字体颜色</button>

    <p :class="{color:isActive}"><!--color此时是一个类名，需要提前定义一个样式，当isActive的值为true时则会应用样式，为false时则不会应用样式，就可以通过改变值的方式来决定是否应用样式-->
        今天天气真不错
    </p>
    <button type="button" @click="openClass">启用样式</button>
    <button type="button" @click="closeClass">关闭样式</button>
    <br>
    <input type="text" v-model="text">
    <p>{{text}}</p>
</div>
<script>
    let a = new Vue({
        el:"#app",
        data:{
            html:
                '<input type="date">',//输入一段html代码
            mag:'今天天气不错',
            condition:false,
            num:1,
            co:'red',
            url:'../../img/人生的智慧.jpg',
            isActive:1,
            text:'显示文字',
            array:[{
                name:'衬衫',
                price:180
            },
                {
                name:'外套',
                price:200
            },
                {
                name:'裤子',
                price:380
            }],
            user:{
                name:'张三',
                age:12,
                work:'程序员'
            },
            pcList:{
                front:{
                    title:'前端技术',
                    list:[
                        {
                            className:'HTML',
                            url:'www.HTML.com'
                        },
                        {
                            className:'Vue',
                            url:'www.vue.com'
                        },
                        {
                            className:'JavaScript',
                            url:'www.JavaScript.com'
                        }
                    ]
                },
                backEnd:{
                    title:'后端技术',
                    last:true,
                    list:[
                        {
                            className:'Java',
                            url:'www.Java.com'
                        },
                        {
                            className:'MySQL',
                            url:'www.MySQL.com'
                        },
                        {
                            className:'JavaWeb',
                            url:'www.JavaWeb.com'
                        }
                    ]
                }
            }
        },
        methods:{
            changeContent(){
                this.mag='测试改变'
            },
            onclick:function (){
                console.log('鼠标点击')
            },
            onMouseover:function (){
                console.log('鼠标经过')
            },
            onEnter:function (){
                console.log('鼠标进入')
            },
            onOut:function (){
                console.log('鼠标退出')
            },
            printEvent:function (){
                console.log(event)
            },
            handleClick:function (mag,event){
                event.preventDefault();//表示阻止事件冒泡
                alert(mag);//弹出一个提示框将参数打印出来
                console.log(event)//并在控制台打印相关的鼠标单击事件
            },
            changeUrl:function (){
                this.url = '../../img/故宫.png';
            },
            changeColor:function (){
                this.co='blue';
            },
            closeClass:function (){
                this.isActive = 0;
            },
            openClass:function (){
                this.isActive = 1;
            }
        }
    })
</script>
</body>
</html>